import 'animate.css';

export default {
    mounted(el, binding) { // Vue 3 使用 mounted 而非 inserted
        const animationClass = `animate__animated animate__${binding.value}`

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    el.classList.add(...animationClass.split(' '))

                    el.addEventListener('animationend', () => {
                        el.classList.remove(...animationClass.split(' '))
                    }, { once: true })
                }
            })
        }, { threshold: 0.1 })

        observer.observe(el)
        el._animateObserver = observer
    },
    unmounted(el) { // Vue 3 使用 unmounted 而非 unbind
        if (el._animateObserver) {
            el._animateObserver.disconnect()
        }
    }
}